/*  */
@import "../../variables/theme.less";
/*  */
@bottomShadowColor:rgba(0,0,0,.1); // 阴影颜色
;
/*  */
.hoverStatus {
    color:@themeColor;
    background-color:#f6f6f6;
}
/* tabs栏 */
.zz-pagetabs {
    position: absolute;
    top: @headerHeight;
    left:@siderWid;
    right: 0;
    z-index: 3;
}
.zz-pagetabs {  
    height: 40px;
    line-height: 40px;
    padding: 0 80px 0 40px;
    background-color: @panelBg;
    box-sizing: border-box;
    box-shadow: 0 1px 2px 0 @bottomShadowColor;

    /*  */
    & > .zz-pagetabs-control {
        position: absolute;
        top: 0;
        width: 40px;
        height: 100%;
        line-height: 40px;
        font-size:18px;
        text-align: center;
        cursor: pointer;
        transition: all .3s;
        -webkit-transition: all .3s;
        box-sizing: border-box;
        border-left: 1px solid #f6f6f6;

        &:hover {
            .hoverStatus();
        }
    }
    /* 左滑动箭头 */
    & > .zz-pagetabs-icon_prev {
        left: 0;
        border-left: none;
        border-right: 1px solid #f6f6f6;
    }
    /* 右滑动箭头 */
    & > .zz-pagetabs-icon_next {
        right:40px;
    }
    /* 下拉箭头 */
    & > .zz-pagetabs-icon_down {
        right:0;
        /* &:hover {
            .zz-nav-child {
                display:block;
            }
        } */
    }
    /* 下拉菜单 */
    .zz-nav-child {
        display: none;
        position: absolute;
        left: -132px;
        top: 65px;
        min-width: 100%;
        line-height: 36px;
        padding: 5px 0;
        box-shadow: 0 2px 4px rgba(0,0,0,.12);
        border: 1px solid #d2d2d2;
        background-color: #fff;
        z-index: 100;
        border-radius: 2px;
        white-space: nowrap;
        & > dd {
            position: relative;
            cursor: pointer;
            span {
                display: block;
                padding: 0 20px;
                font-size:14px;
                color: @fsColor666;
                transition: all .3s;
                -webkit-transition: all .3s;
                &:hover {
                    background-color: #f2f2f2;
                }
            }

        }
    }
    /* tab区域 */
    .zz-pagetabs_tabs {
        margin: 0;
        overflow: hidden;
        text-align: left!important;
    }
    .zz-pagetabs_tabs_titles {
        position: relative;
        left: 0;
        height: 40px;
        white-space: nowrap;
        font-size: 0;
        transition: all .2s;
        -webkit-transition: all .2s;

        & > li {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            font-size: 14px;
            transition: all .2s;
            -webkit-transition: all .2s;
            position: relative;
            line-height: 40px;
            padding: 0 40px 0 15px;
            text-align: center;
            cursor: pointer;
            color:@fsColor666;
            /*  */
            min-width: 0;
            line-height: 40px;
            max-width: 360px;
            text-overflow: ellipsis;
            overflow: hidden;
            border-right: 1px solid #f6f6f6;
            vertical-align: top;

            &:first-child {
                padding-left:40px;
                padding-right:15px;
            }

            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 0;
                height: 2px;
                border-radius: 0;
                background-color: @fsColor666;
                transition: all .3s;
                -webkit-transition: all .3s;
            }

            &:hover,
            &.tab-this {
                .hoverStatus();
            }

            &:hover {
                &:after {
                    width:100%;
                }
            }

            &.tab-this {
                &:after {
                    width:100%;
                    background-color:@themeColor;
                }
            }
            /* 默认打开tabitem的icon */
            & > .first-tabitem-icon {
                position:absolute;
                top:50%;
                left:12px;
                width:16px;
                height:16px;
                margin-top:-8px;
            }
            /*  */
            & > .tab-close {
                position: absolute;
                right: 8px;
                top: 50%;
                margin: -8px 0 0;
                width: 16px;
                height: 16px;
                line-height: 16px;
                color:@fsColor999;
                /* border-radius: 50%; */

                &:hover {
                    color:@fsColorf;
                    background-color:@dangerColor;
                }
            }

        }
    }
}


/* tabs容器 */
.zz-tabsbody-item,
.zz-tabsbody-item_iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.zz-tabsbody-item {
    display:none;
    overflow: hidden;
    
    &.tab-this {
        display:block;
    }
}
/* tabs容器内的iframe */
.zz-tabsbody-item_iframe {
    width: 100%;
    height: 100%;
}
